<!--
 * @Author: 张卓南
 * @Date: 2023-10-17 23:19:59
 * @LastEditTime: 2023-10-21 17:43:51
 * @Description: 
-->
<template>
  <div
    class="cart-item enter-y"
    v-for="(item, index) in resultList"
    :key="index"
    @click="jump"
  >
    <div class="w-[41vw] bg-white card h-80">
      <van-image :src="car" />
      <div class="title m-1">
        <div class="p-2">
          <van-icon name="user-o" size="16" class="item" />
        </div>
        <p class="item title-text">{{ item.loginName }}</p>
      </div>

      <div class="content m-1">
        <div class="p-2">
          <van-image :src="qiche" width="1em" height="1em" />
        </div>
        <div class="title-text ">
          <p class="text-darkBlue dark:text-garyWhite">
            {{ item.upWorkSeat }}个空位
          </p>
          <p class="text-darkBlue dark:text-garyWhite">鄂A566**</p>
        </div>
      </div>

      <div class="title pt-1">
        <div class="px-2 red-text">终点：{{ item.workplace }}</div>
        <!-- <p class="item title-text">武汉</p> -->
      </div>

      <div class="title">
        <div class="px-2 title-text">
          {{ item.workplace }}-{{ item.homeAddress }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入
import { defineComponent } from "vue";
import { Icon } from "@vicons/utils";
import { UserOutlined, MobileOutlined } from "@vicons/antd";
import car from "@/assets/出行.png";
import { useRoute, useRouter } from "vue-router";
import qiche from "@/assets/汽车.png";

export default defineComponent({
  name: "Card",
  props: {
    data: Object,
  },
  // props 是一个对象，包含父组件传递给子组件的所有数据。
  // context ：上下文，包括 attrs 、 emit 、slots。
  setup(props, context) {
    const router = useRouter();
    const { resultList } = props?.data;
    const jump = () => {
      console.log(11);
      router.push("/preResult");
    };
    return { resultList, car, jump, qiche };
  },
});
</script>

<style scoped lang="less">
.card {
  box-shadow: 0px 2px 4px -2px rgba(16, 24, 40, 0.06),
    0px 4px 8px -2px rgba(16, 24, 40, 0.1);
  border-radius: 8px;
  padding: 2px;
  margin: 0 10px;
}
.cart-item {
  margin-bottom: 8px;
}
.title {
  display: flex;
  align-items: center;
  margin: 5px;
}
.item {
  flex: 1;
}
.title-text {
  color: rgb(43, 43, 43);
  font-family: Inter;
  font-size: 14px;
  font-weight: 600;
}
.content {
  display: flex;
  flex-direction: row;
  height: 30px;
  align-items: center;
}
.red-text {
  color: rgb(204, 44, 0);
  font-family: Inter;
  font-size: 14px;
  font-weight: 400;
}
</style>
